<template>
    <!--  电子签约-->
    <div>
        <div class="w-132 ">
            <h2>电子签约</h2>
            <div class="spanLine"></div>
            <div class="signing" style="display: flex;" :style="checkPageParam?'flex-direction: column':''">
                <div class="sinBorder" v-animate="'queue-bottom'">
                    <img :src="imgList.src" alt="">
                    <div class="geRen">
                        <h2>个人实名认证</h2>
                        <div></div>
                        <p>身份信息验证：与公安部信息比对认证手机号 <br/>
                            三要素验证：与运营商手机号实名信息比对认证 <br/>
                            证件识别：证件关键信息数据识别与采集<br/>
                            活体检测:交互动作人脸识别进行活体检测<br/>
                            人脸比对:与公安部预留人像比对认证<br/>
                        </p>
                    </div>
                </div>
                <div class="sinBorder" v-animate="'queue-bottom'">
                    <img :src="imgList.src1" alt="">
                    <div class="geRen">
                        <h2>企业实名认证</h2>
                        <div></div>
                        <p>身份信息验证：管理员/法人身份信息验证 <br/>
                            工商三要素验证：与工商局工商信息对比认证 <br/>
                            营业执照识别：营业执照关键信息数据识别与采集 <br/>
                            对公账户打款验证：企业对公银行账户信息验证 <br/>
                            企业公章验证：企业认证意愿授权验证<br/>
                        </p>
                    </div>
                </div>
            </div>
        </div>
        <div style="height: 100%;width: 100%;background-color: #2C3E50;margin-top: 0.6rem">
            <div style="width: 80%;margin: 0 auto;display: flex;justify-content: center;">
                <div v-for="(item,index) in itemList" :key="index" class="item">
                    <div class="colltra">
                        <div class="colltraImg">
                            <img :src="item.src" alt=""></div>
                        <h2>{{ item.title }}</h2>
                        <div style="width: 0.3rem;height: 1px;background: #FFFFFF;"></div>
                        <div class="text">{{ item.text }}</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="step">
            <div v-for="(item,index) in dataList" :key="index">
                <div class="num">{{ item.num }}</div>
                <div class="stepColor">{{ item.title }}</div>
                <div class="divLine"></div>
            </div>
            <div>
                <h1>只需简单三步 签完一份电子合同</h1>
                <div class="button" @click="Jump()">申请免费体验<img :src="imgList.src2" style="width: 0.25rem; "/>
                </div>
            </div>
        </div>
    </div>

</template>

<script>
    export default {
        name: "Electronics",
        data() {
            return {
                checkPageParam: false,
                imgList: {
                    src: require("@/assets/images/serverOne/geren.png"),
                    src1: require("@/assets/images/serverOne/qiye.png"),
                    src2: require("@/assets/right.png")
                },
                dataList: [
                    {
                        num: "01",
                        title: '实名认证'
                    },
                    {
                        num: "02",
                        title: '签发合同'
                    },
                    {
                        num: "03",
                        title: '待对方签署'
                    }
                ],
                itemList: [
                    {
                        src: require('@/assets/images/serverOne/kongzhi2.png'),
                        title: '管理控制台',
                        text: '权限分级管理、审批管理、印章管理等多种全面完善的管理体系'
                    },
                    {
                        src: require('@/assets/images/serverOne/qianshu2.png'),
                        title: '多终端签署',
                        text: '适配电脑端、手机端、平板端 不受终端限制随时随地签署电 子合同'
                    },
                    {
                        src: require('@/assets/images/serverOne/tixing2.png'),
                        title: '全流程提醒',
                        text: '待我签署、待他人签署、过期提 醒等全流程完美追踪合同进程'
                    }]
            }
        },
        methods: {
            Jump() {
                window.location.href = 'http://47.100.78.124:9982'
            }
        }
    }
</script>

<style scoped lang="less">
    h2 {
        font-size: 34px;
    }

    .w-132 {
        text-align: center;
        width: 80%;
        margin: 0 auto;
    }

    .signing {
        margin-top: 76px;
        display: flex;
        justify-content: space-around;
        align-items: center;

        .sinBorder {
            width: 604px;
            height: 100%;
            padding-bottom: 60px;
            background: #FFFFFF;
            border: 1px solid rgba(6, 0, 1, 0.2000);
            border-radius: 30px;
            transition: all .7s;

            img {
                width: 132px;
                height: 126px;
                margin: 44px 0;
            }

            .geRen {
                padding-left: 120px;
                margin: 0 auto;
                text-align: left;

                div {
                    width: 26px;
                    height: 2px;
                    background: #1DD2AF;
                }
            }
        }

        .sinBorder:hover {
            box-shadow: 0 0 20px 0 rgba(6, 0, 1, 0.2000);
        }
    }

    .colltra {
        color: #FFFFFF;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding-top: 100px;

        .colltraImg {
            width: 100px;
            height: 100px;
            border-radius: 50%;
            border: 2px solid #ffffff;
            display: flex;
            justify-content: center;
            align-items: center;
            margin-bottom: 20px;
        }

        img {
            width: 60px;
            height: 60px;

        }

        .text {
            margin-top: 20px;
            width: 250px;
            height: 51px;
        }
    }

    .item {
        width: 443px;
        height: 100%;
        padding-bottom: 90px;
    }


    .item:nth-of-type(1):hover {
        background-color: #1DD2AF;

        .colltraImg {
            background-color: white;

            img:nth-of-type(1) {
                content: url('../assets/images/serverOne/kongzhi1.png');
            }
        }

    }

    .item:nth-of-type(2):hover {
        background-color: #1DD2AF;

        .colltraImg {
            background-color: white;

            img:nth-of-type(1) {
                content: url('../assets/images/serverOne/qianshu1.png');
            }
        }

    }

    .item:nth-of-type(3):hover {
        background-color: #1DD2AF;

        .colltraImg {
            background-color: white;

            img:nth-of-type(1) {
                content: url('../assets/images/serverOne/tixing1.png');
            }
        }

    }

    .num {
        font-size: 100px;
        color: rgba(149, 146, 146, 0.36);
    }

    .step {
        width: 65%;
        margin: 40px auto;
        height: 100%;
        padding: 80px 0;
        display: flex;
        justify-content: space-between;
        align-items: center;
        text-align: center;

        .stepColor {
            color: #1DD2AF;
        }
    }

    .divLine {
        width: 28px;
        height: 2px;
        margin: 19px auto;
        background-color: #1DD2AF;
    }

    .button {
        width: 240px;
        height: 100%;
        padding: 5px 5px;
        font-weight: bolder;
        border: 2px solid #1DD2AF;
        border-radius: 19px;
        margin-left: 30%;
        display: flex;
        justify-content: space-evenly;
        align-items: center;
        cursor: pointer;
    }

    .border {
        box-shadow: 0 0 19px 0 rgba(6, 0, 1, 0.2000);
        border-radius: 30px;
    }

    @media only screen and (max-width: 860px) {
        .w-132 {
            width: 100%;
        }

        .sinBorder {
            width: 800px !important;

            p {
                transform: scale(.9);
            }
        }

    }

</style>
